<template>
  <div class="content">
    <div class="elTable">
      <!-- 表格 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="人才库" name="人才库">
          <div class="tabInfo">
            <div class="search">
              <!-- 搜索按钮操作 -->
              <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline"
              >
                <el-form-item>
                  <el-input
                    v-model="formInline.name"
                    placeholder="请输入姓名"
                    clearable
                  />
                </el-form-item>
                <el-form-item>
                  <el-input
                    v-model="formInline.profession"
                    placeholder="请输入专业名称"
                    clearable
                  />
                </el-form-item>
                <el-form-item>
                  <el-input
                    v-model="formInline.age"
                    placeholder="请输入年龄"
                    clearable
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="handleQuery"
                    >查询</el-button
                  >
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="resetTabState"
                    >重置</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
            <div v-if="talentPoolTableData.length > 0" class="course-resources">
              <div class="course-box">
                <div
                  v-for="(item, index) in talentPoolTableData"
                  :key="index"
                  class="course-box-item"
                >
                  <div class="course-box-item-waper" @click="handleInfo(item)">
                    <div class="info">
                      <img
                        class="img"
                        v-if="item.personPhoto"
                        :src="item.personPhoto"
                      />
                      <div v-else>
                        <img class="img" src="@/assets/images/暂无图片.png" />
                      </div>
                      <div class="user">
                        <div class="userInfo">
                          <span class="user_name">
                            {{ item.name }}
                          </span>
                          <div class="phone">
                            <el-icon class="icon">
                              <Phone />
                            </el-icon>
                            <span>{{ item.phoneNumber }}</span>
                          </div>
                          <div class="phone" style="margin-right: 0">
                            <el-icon class="icon">
                              <Postcard />
                            </el-icon>
                            <span>{{ item.mail }}</span>
                          </div>
                        </div>
                        <div class="user_age">
                          <span class="msg">{{
                            item.sex == "0" ? "男" : "女"
                          }}</span>
                          <span class="border">|</span>
                          <span class="msg">{{ item.age }}</span>
                          <span class="border">|</span>
                          <span class="msg">{{
                            item.educationalBackground
                          }}</span>
                        </div>
                      </div>
                    </div>
                    <div class="school">
                      <div class="schoolG">
                        <el-icon class="schoolG_icon">
                          <Histogram />
                        </el-icon>
                        <span class="schoolG_msg">{{
                          item.graduateSchool
                        }}</span>
                      </div>
                      <div class="schoolG">
                        <el-icon class="schoolG_icon">
                          <QuestionFilled />
                        </el-icon>
                        <span class="schoolG_msg">{{ item.profession }}</span>
                      </div>
                    </div>
                    <div class="channel">
                      <div class="msg">{{ item.applicationSource }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              <el-empty description="暂无数据" />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="全部数据" name="全部数据">
          <div class="tabInfo">
            <div class="search">
              <!-- 搜索按钮操作 -->
              <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline"
              >
                <el-form-item>
                  <el-input
                    v-model="formInline.profession"
                    placeholder="请输入专业名称"
                    clearable
                  />
                </el-form-item>
                <el-form-item>
                  <el-input
                    v-model="formInline.age"
                    placeholder="请输入年龄"
                    clearable
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="handleQuery"
                    >查询</el-button
                  >
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="resetTabState"
                    >重置</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
            <TabTable
              class="tabTable"
              :isShowBtn="false"
              :isApproval="true"
              :tableData="noteTableData"
              :toTip="tip"
              :btnShow="false"
              :pagination="pagination"
              @sizeChange="sizeChange"
              @currentChange="currentChange"
            >
            </TabTable>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { getTalentPoolList } from "@/api/recruitment/talentPool/index";
import TabTable from "../components/tabTable.vue";
import { onMounted, reactive, ref, computed, onBeforeUnmount } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getCommonTableHeight } from "@/utils/commonTableHeight.js";

const baseUrl = import.meta.env.VITE_APP_BASE_API;
const router = useRouter();
// 标签页
const activeName = ref("人才库");
// 查看切换
const tip = ref("人才库");
// 人才库
const talentPoolTableData = ref([]);
const chunkedTalentPoolTableData = computed(() => {
  const chunkSize = 8;
  const chunks = [];
  for (let i = 0; i < talentPoolTableData.value.length; i += chunkSize) {
    chunks.push(talentPoolTableData.value.slice(i, i + chunkSize));
  }
  return chunks;
});

const tabHeight = ref(0);
// 全部数据
const noteTableData = ref([]);
const pagination = ref({
  total: 0,
  page: 1,
  limit: 10,
  pageSizes: [10, 20, 30, 50],
});

// 初始搜索表单数据
const initialFormInline = {
  profession: "",
  age: "",
  name: "",
  pageNum: 1,
  pageSize: 10,
};
const formInline = reactive({ ...initialFormInline });

// 重置搜索表单、表格数据和分页信息
const resetTabState = () => {
  formInline.profession = initialFormInline.profession;
  formInline.age = initialFormInline.age;
  formInline.name = initialFormInline.name;
  formInline.pageNum = initialFormInline.pageNum;
  formInline.pageSize = initialFormInline.pageSize;
  talentPoolTableData.value = [];
  noteTableData.value = [];
  pagination.value = {
    total: 0,
    page: 1,
    limit: 10,
    pageSizes: [10, 20, 30, 50],
  };
  getList();
};

onMounted(async () => {
  await getList();
  updateViewportHeight(); // 初始化视口高度
  window.addEventListener("resize", updateViewportHeight); // 监听窗口大小变化
});

const getImg = (url) => {
  return baseUrl + url;
};
// 切换标签页
const handleClick = (tab, event) => {
  tip.value = tab.props.name;
  // 重置状态
  resetTabState();
};

const getList = () => {
  if (activeName.value == "人才库") {
    formInline.pageNum = 1;
    formInline.pageSize = 99999999;
  }
  getTalentPoolList(formInline).then((res) => {
    if (res.rows.length > 0) {
      talentPoolTableData.value = res.rows;
      noteTableData.value = res.rows;
      pagination.value.total = res.total;
    } else {
      talentPoolTableData.value = [];
      noteTableData.value = [];
      pagination.value.total = 0;
    }
  });
};
const sizeChange = (size) => {
  formInline.pageNum = 1;
  formInline.pageSize = size.limit;
  pagination.value.page = 1;
  pagination.value.limit = size.limit;
  getList();
};
const currentChange = (page) => {
  formInline.pageNum = page.page;
  formInline.pageSize = pagination.value.limit;
  pagination.value.page = page.page;
  getList();
};
const handleQuery = () => {
  getList();
};
const handleInfo = (item) => {
  router.push({
    name: "talentPoolView",
    query: {
      id: item.id,
    },
  });
};

const updateViewportHeight = () => {
  tabHeight.value = getCommonTableHeight() + 50;
};

onBeforeUnmount(() => {
  window.removeEventListener("resize", updateViewportHeight); // 移除监听
});
</script>

<style lang="scss" scoped>
.talentPool {
  padding: 16px;
}

.course-resources {
  height: 100%;
  overflow: auto;
  // border: 3px solid #007bff;
  border-radius: 10px;
  .course-box {
    .course-box-item {
      .course-box-item-waper:hover {
        cursor: pointer;
      }

      .course-box-item-waper {
        background-color: #fff;
        padding-bottom: 10px;
        margin-left: 20px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.096);
        height: 100%;
        display: flex;
        padding: 16px;
        justify-content: space-between;
        align-items: center;

        .info {
          display: flex;
          width: 450px;

          .user {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 16px;

            .userInfo {
              display: flex;
              align-items: center;

              .user_name {
                color: #16191d;
                font-family: "Source Han Sans CN";
                font-size: 20px;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
                margin-right: 20px;
              }

              .phone {
                margin-right: 20px;
                display: flex;
                align-items: center;
                color: #6f7b90;
                font-family: "Source Han Sans CN";
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 16px;

                .icon {
                  color: rgb(0, 123, 255);
                  margin-right: 5px;
                  font-size: 14px;
                }
              }
            }

            .user_age {
              .msg {
                color: #6f7b90;
                font-family: "Source Han Sans CN";
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
              }

              .border {
                margin: 0 8px;
                color: #6f7b90;
                font-size: 14px;
              }
            }
          }

          .img {
            width: 64px;
            height: 64px;
            border-radius: 4px;
          }
        }

        .school {
          display: flex;
          flex-direction: column;
          justify-content: center;
          height: 60px;
          margin-left: 200px;
          flex: 1;

          .schoolG {
            display: flex;
            align-items: center;
            margin-bottom: 8px;

            &:last-child {
              margin-bottom: 0;
            }

            .schoolG_msg {
              color: #16191d;
              font-family: "Source Han Sans CN";
              font-size: 14px;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
              margin-left: 5px;
            }

            .schoolG_icon {
              color: rgb(111, 123, 144);
              font-size: 14px;
            }
          }
        }

        .channel {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          margin-left: 20px;
          min-width: 120px;

          .msg {
            color: #6f7b90;
            font-family: "Source Han Sans CN";
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            text-align: right;
          }
        }
      }
    }
  }

  // 下面的文字宽度超过了出现省略号
  .courseName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
